import { mapState, mapActions, mapGetters } from 'vuex'
import { ComponentTypes } from '@/store/default-styles'
import { ComponentTypesDefaultDom } from  '@/store/default-styles-dom'
import { FontFamilys } from '@/store/top-data';
import { TEXT_STYLES, TEXT_STYLES_, COMPONENT_TYPES, 
  POP_TYPES, DIGIT_MAP , INPUT_TYPES, BORDER_STYLES,
  GRADIENT_BG_TYPE, GRIDIENT_DIRECTION, SWIPER_EFFCE, SCROLLBER_TYPE, 
  POSITION_TYPES, PAGE_TYPE, GLOBAL_POST_TYPES, PAGE_TYPE_, PLACEHOLDER_COLOR_TYPE } from '@/common/const'
import { WB_LISTS_CONTROL_ID, HIDDEN_EVENT_TABS } from '@/common/const-wb'
import { ROTATE3D_LIST, EVENT_ATTR } from '@/common/events'

export const editUtils = {
  data() {
    return {
      wbLists_: [],
    }
  },
  created () {
    const data_ = {
      POP_TYPES: POP_TYPES,
      DIGIT_MAP: DIGIT_MAP,
      GLOBAL_POST_TYPES: GLOBAL_POST_TYPES,
      activeNames: [1],
      fontFamilys: FontFamilys,
      textAlign: false,
      textStyles: _.cloneDeep(TEXT_STYLES),
      textStyles_: _.cloneDeep(TEXT_STYLES_),
      drag: false,
      EVENT_ATTR: EVENT_ATTR,
      eventTabs: ['comp', 'position'],
      INPUT_TYPES: INPUT_TYPES,
      BORDER_STYLES: BORDER_STYLES,
      GRADIENT_BG_TYPE: GRADIENT_BG_TYPE,
      SWIPER_EFFCE: SWIPER_EFFCE,
      SCROLLBER_TYPE: SCROLLBER_TYPE,
      PLACEHOLDER_COLOR_TYPE: PLACEHOLDER_COLOR_TYPE,
      POSITION_TYPES: POSITION_TYPES,
      GRIDIENT_DIRECTION: GRIDIENT_DIRECTION,
      PAGE_TYPE: PAGE_TYPE,
    };
    for(let key in data_) {
      this[key] = data_[key];
    }
  },
  props: {
    title: String,
    tabName: String,
    controlId: String
  },
  computed:{
    ...mapGetters("components", {
      pages: "getH5Pages",
      pops: "getPopPages"
    }),
    ...mapState({
      tabNames: (state) => _.cloneDeep(state.components.tabNames),
      events: (state) => state.components.currentComponentData && state.components.currentComponentData.events || state.components.currentPage.events,
      commonAttr: (state) => _.cloneDeep(state.components.currentComponentData.commonAttr),
      lists: (state) => _.cloneDeep(state.components.currentComponentData.lists),
      componentData: (state) => _.cloneDeep(state.components.currentComponentData),
      siteAttrs: (state) => state.components.attrs,
      siteStatus: (state) => state.components.siteStatus,
      itemControls: (state) => _.cloneDeep(state.wbComponents.currentControls),
      controls: (state) => state.wbComponents.controls,
    }),
    isLong() {
      if(this.siteAttrs.pageType == PAGE_TYPE.long){
        return true
      }else{
        return false
      }
    },
    isDislayCommonList(){
      if(this.itemControls){
        if(this.wbLists.length > 0 || this.componentData.commonAttr.isCustomList){
          return false
        }else{
          return true
        }
      }else{
        return true
      }
    },
    getMainListEvent(){
      let event
      let tempArr = []
      _.forEach(this.componentData.events, (event) => {
        if(event.controlId && event.controlId.length > 0 && WB_LISTS_CONTROL_ID.indexOf(event.controlId) != -1){
          tempArr.push(event)
        }
      })
      if(tempArr.length > 0){
        tempArr = _.sortBy(tempArr, (event) => { return event.index; });
        event = tempArr[0]
        //主事件是组件的第一个事件，是wblist值， controlId是组件的主事件id
      }
      return event
    },
    wbLists(){
      if(!this.itemControls){
        this.wbLists_ = []
        return this.wbLists_
      }
      let event = this.getMainListEvent
      if(event){
        let controlData = this.itemControls[event.controlId]
        if(controlData){
          if(controlData.data.elements){
            this.wbLists_ = controlData.data.elements;
          }
        }
      }else{
        this.wbLists_ = []
      }
      return this.wbLists_
    },
    getComId(){
      return {id: this.componentData.id}
    },
    getEventEditPanels(){
      let eventComponents = {};
      _.forEach(this.events, (event) => {
        if(event.controlId && event.controlId.length > 0 && event.comType){
          if(this.componentData.cid == COMPONENT_TYPES.wb_common_list || this.componentData.cid == COMPONENT_TYPES.wb_carousel){
            if(event.comType == "add-vote"){
              //
            }else{
              eventComponents[event.controlId] = event
            }
          }else{
            eventComponents[event.controlId] = event
          }
        }
      })
      return eventComponents;
    },
    isDisplayEventTab(){
      if(HIDDEN_EVENT_TABS.indexOf(parseInt(this.componentData.cid)) != -1){
        return false
      }else{
        return true
      }
    },
  },
  methods: {
    ...mapActions({
      updateTab: "components/updateTab",
      addComponentItem: "components/addComponentItem",
      deleteComponentItem: "components/deleteComponentItem",
      updateComponentItem: "components/updateComponentItem",
      updateCurrentComponentData: "components/updateCurrentComponentData",
    }),
    showAlert(error) {
      this.$dialog.alert({
        title: '',
        message: error,
      })
    },
    onChangeAttr(){
      this.updateCurrentComponentData({commonAttr: this.commonAttr});
    },
    onChangeAttrId(){
      this.$store.commit("wbComponents/setControlById", {compId: this.componentData.id, newCompId: this.getComId.id})
      this.updateCurrentComponentData({id: this.getComId.id});
    },
    onChangeAttrType(){
      let newobj;
      if(componentData_.cid == COMPONENT_TYPES.group_component) {
        newobj = _.cloneDeep(ComponentTypesDefaultDom[COMPONENT_TYPES.group_component])
      } else {
        newobj = _.cloneDeep(ComponentTypesDefaultDom[COMPONENT_TYPES.group_carousel])
      }
      newobj.id = componentData_.id
      newobj.conAttr = componentData_.conAttr
      newobj.components = componentData_.components
      useWebComponent.replaceCurrentComponentData(newobj)
      this.$store.commit("components/replaceCurrentComponentData", newobj)
    },
    onAddItem(){
      let item
      if(this.componentData.events.rotate3d || this.componentData.events.shake){
        item = _.cloneDeep(ROTATE3D_LIST[0])
      }else{
        item = _.cloneDeep(ComponentTypes[this.componentData.cid].lists[0]);
      }
      if(this.componentData.lists && this.componentData.lists[0]){
        item = _.cloneDeep(this.componentData.lists[0]);
      }
      if(item){
        this.addComponentItem(item);
      }
    },
    onUpdateItem(index){
      this.updateComponentItem({index, item:this.lists[index]});
    },
    onDeleteItem(index){
      this.deleteComponentItem({index});
    },
    inputChanged(value) {
      this.activeNames = value;
    },
    // handleChange(value){
    //   console.log("draggle: " + value);
    // },
    getComponentData() {
      return {
        on: {
          // change: this.handleChange,
          input: this.inputChanged
        },
        props: {
          value: this.activeNames
        }
      };
    },
    onChangeAlign(params){
      if(params.icon == "jy-icon-empty" || params.length == 0) {
        this.textAlign = false;
        _.forEach(this.textStyles, style => {
          style.checked = false;
          this.commonAttr[style.key] = ''
        });
         _.forEach(this.textStyles_, style => {
          style.checked = false;
          this.commonAttr[style.key] = ''
        });
        this.onChangeAttr();
      }else{
        let str;
        if(params.attr){
          str = params.attr
        }else{
          str = params
        }
        let attrs = str.split(',');
        let attr = attrs[0];
        let value = attrs[1];

        if(params.attr){
          if(params.checked){
            this.commonAttr[attr] = value;
          }else{
            this.commonAttr[attr] = '';
          }
        }else{
          this.commonAttr[attr] = value;
        }
        this.onChangeAttr();
      }
    },
    onUpdateTab(){
      let params = {};
      params[this.tabName] = this.tabNames[this.tabName]
      this.updateTab(params);
    },
    getLists(index) {
      let list = [];
      if(index == PAGE_TYPE_.pop){
        this.pushPops(list);
      }else{
        this.pushPages(list);
      }
      return list;
    },
    pushPages(list){
      let len = this.pages.length;
      list.push({name:'无', value:0});
      for (let i = 0; i < len; i++) {
        let str = "页面-" + (i+1);
        list.push({name:str, value: (i+1)});
      }
    },
    pushPops(list){
      let len = this.pops.length;
      list.push({name:'无', value:0});
      for (let i = 0; i < len; i++) {
        let str = "弹层-" + (i+1);
        list.push({name:str, value: (i+1)});
      }
    },
    isHasOwnProperty(obj, attr){
      return Object.prototype.hasOwnProperty.call(obj, attr)
    },
  }
}